<%@ page language="java" import="com.dao.*,com.bean.*,java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<% 
	PlateDao dao=new PlateDao();
	List<PlateBean> bean=dao.selectAll();
	request.setAttribute("platebean",bean);
%>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>微抽奖</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.rotary{position:relative;width:854px;height:504px;margin:50px auto 0 auto;background:#d71f2e url(images/bg1.png);}
.rotaryArrow{position:absolute;left:181px;top:104px;width:294px;height:294px;cursor:pointer;background-image:url(images/arrow.png);}

.list{position:absolute;right:48px;top:144px;width:120px;height:320px;overflow:hidden;}
.list h3{display:none;}
.list li{height:37px;font:14px/37px "Microsoft Yahei";color:#ffea76;text-indent:25px;background:url(images/user.png) 0 no-repeat;}

.result{display:none;position:absolute;left:130px;top:190px;width:395px;height:118px;background-color:rgba(0,0,0,0.75);filter:alpha(opacity=90);}
.result a{position:absolute;right:5px;top:5px;width:25px;height:25px;text-indent:-100px;background-image:url(images/close.png);overflow:hidden;}
.result p{padding:45px 15px 0;font:16px "Microsoft Yahei";color:#fff;text-align:center;}
.result em{color:#ffea76;font-style:normal;}
</style>
<script type="text/javascript">
	function aler(){
	var p=document.getElementById("res").value;
		//location.href="AddPlate.plate?prize="+p;
		alert(p);
		//alert(document.getElementById("res").value);
		f1.action="AddPlate.plate?prize="+p;
		f1.submit();
	}
</script>
<style type="text/css">
.tb960x90 {display:none!important;display:none}</style>
</head>

<body>
<form name="f1">
<!-- Demo start  -->
<div class="rotary">
	<div class="rotaryArrow" id="rotaryArrow"></div>
	<div class="list">
		<h3>中奖名单</h3>
		<ul>
			<c:forEach var="ii" items="${requestScope.platebean}">
				<li>
					${ii.phonenum}
				</li>
			</c:forEach>
		</ul>
	</div>
	<div class="result" id="result">
		<p id="resultTxt"></p>
		<a href="javascript:" id="resultBtn" title="关闭" onclick="aler()">关闭</a>
	</div>
</div>


<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.rotate.min.js"></script>
<script type="text/javascript">
$(function(){
	var $rotaryArrow = $('#rotaryArrow');
	var $result = $('#result');
	var $resultTxt = $('#resultTxt');
	var $resultBtn = $('#result');
	var r=${sessionScope.r};
	//alert(r);
	if(r==0){
		$rotaryArrow.click(function(){
			var data = [0, 1, 2, 3, 4, 5, 6, 7];
			data = data[Math.floor(Math.random()*data.length)];
			switch(data){
				case 1: 
					rotateFunc(1,87,' 1 元代金券');
					break;
				case 2: 
					rotateFunc(2,43,' 5 元代金券');
					break;
				case 3: 
					rotateFunc(3,134,' 10 元代金券');
					break;
				case 4: 
					rotateFunc(4,177,'很遗憾，这次您未抽中奖，继续加油吧');
					break;
				case 5: 
					rotateFunc(5,223,' 20 元代金券');
					break;
				case 6: 
					rotateFunc(6,268,' 50 元代金券');
					break;
				case 7: 
					rotateFunc(7,316,' 30 元代金券');
					break;
				default:
					rotateFunc(0,0,'很遗憾，这次您未抽中奖，继续加油吧');
			}
		});
	
		var rotateFunc = function(awards,angle,text){  //awards:奖项，angle:奖项对应的角度
			$rotaryArrow.stopRotate();
			$rotaryArrow.rotate({
				angle: 0,
				duration: 5000,
				animateTo: angle + 2880,  //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈
				callback: function(){
					$resultTxt.html(text);
					$result.show();
					document.getElementById('res').value=text;
				}
			});
		};
	
		$resultBtn.click(function(){
			$result.hide();
		});
	}else{
		alert('您已经抽过奖,不能再抽奖了');
		history.go(-1);
	}
});

</script>
<input type="hidden" name="result" id="res"/>
</form>
</body>
</html>